<template>
	<view class="key-container" @click="closeChage" v-show="showMask">
		<uni-transition :modeClass="['slide-bottom']" :show="show" :styles="{ height: '100%' }" :duration="duration">
			<view class="key-content" @click.stop>
				<slot></slot>
				<view class="key-box block flex">
					<view class="key-left">
						<view class="key-top flex flex-wrap">
							<view class="btn-box" v-for="(item, index) in numArr" :key="index">
								<button hover-class="active" class="cu-btn key-btn text-black text-xl"
									@click.stop="keydown(item)">{{ item }}</button>
							</view>
						</view>
						<view class="key-bottom">
							<view class="btn-zero">
								<button hover-class="active" class="cu-btn key-btn text-black text-xl"
									@click.stop="keydown('0')">0</button>
							</view>
							<view class="btn-point">
								<button hover-class="active" class="cu-btn key-btn text-black text-xl"
									@click.stop="keydown('.')">.</button>
							</view>
						</view>
					</view>
					<view class="key-right">
						<view class="del">
							<button hover-class="active" class="cu-btn key-btn text-black text-xl" @click.stop="del">
								<text class="zm iconbackspace text-xl"></text>
							</button>
						</view>
						<view class="confirm">
							<button hover-class="active" :style="[confirmStyle]" class="cu-btn" @click.stop="confirm">
								<text class="confirm-text">{{ confirmText }}</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	/**
	 * 付款组件
	 * @property {Number} duration - 弹出动画时长，默认为300
	 * @event {Function} input - 数字改变触发，参数为数字
	 * @event {Function} confirm - 付款时触发，参数为数字
	 * @event {Function} hide - 关闭键盘触发，参数为空
	 */

	import uniTransition from './animation.vue';
	export default {
		components: {
			uniTransition
		},
		props: {
			value: {
				type: String, //传入的值 vue2
				default: ''
			},
			modelValue: {
				type: String, //传入的值 vue3
				default: ''
			},
			duration: {
				type: Number, //弹出动画时常
				default: 300
			},

			max: {
				type: Number, //最大交易金额
				default: 100000
			},
			confirmText: {
				type: String, //确认按钮的文本
				default: '确认'
			},
			overlayClose: {
				type: Boolean, //是否在点击遮罩层后关闭
				default: true
			},
			showMode: {
				type: Boolean, //是否需要遮罩层
				default: true
			},
			confirmStyle: {
				type: Object, //确认按钮的样式
				default: () => {
					return {
						backgroundColor: '#2f6549'
					};
				}
			}
		},
		// 兼容vue3需声明emits注册事件
		emits: ['hide', 'confirm', 'input', 'update:modelValue'],
		data() {
			return {
				show: false, //显示键盘
				showMask: false, //遮罩层
				numArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9'] //键盘
			};
		},

		computed: {
			// v-model的实现
			content: {
				// （vue2:接收value vue3接收modelValue）
				get: function(el) {
					return this.value || this.modelValue;
				},
				// （vue2派发input vue3派发update:modelValue）
				set: function(val) {
					this.$emit('input', val);
					this.$emit('update:modelValue', val);
				}
			}
		},
		methods: {
			// 关闭
			close() {
				this.show = false;
				setTimeout(() => {
					this.showMask = false;
				}, this.duration);
			},
			// 打开
			open() {
				this.show = true;
				this.showMask = true;
			},
			// 删除
			del() {
				if (this.content.length) {
					this.content = this.content.slice(0, this.content.length - 1);
				}
			},
			// 输入
			keydown(e) {
				let strLen = this.content.length;
				// 最大支付金额的限制
				if (this.content >= this.max) {
					wx.showToast({
						title: `支付金额不能大于${this.max}`,
						icon: 'none',
						duration: 1500
					});
					return;
				}
				switch (e) {
					// 如果第一位是.做补零
					case '.':
						if (this.content.indexOf('.') === -1) {
							this.content.length < 1 ? (this.content = '0.') : (this.content += '.');
						}
						break;

					default:
						//输入的为0直接展示
						if (this.content === '0' && e !== '.') {
							this.content = e;
						} else {
							let spotIndex = this.content.indexOf('.'); //小数点的位置
							// 截取掉第一个0
							if (this.content[0] === '0' && this.content[1] !== '.') {
								this.content = this.content.substr(1);
							}
							//小数点后只保留两位
							if (spotIndex === -1 || this.content.length - spotIndex !== 3) {
								this.content += e;
							}
						}
						break;
				}
			},
			// 遮罩层 关闭
			closeChage() {
				if (this.overlayClose) {
					this.$emit('hide');
					this.close();
				}
			},
			// 确认按钮
			confirm() {
				this.$emit('confirm', this.content);
				this.closeChage();
			}
		}
	};
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'zm';
		/* project id 2442084 */
		src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot');
		src: url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff2') format('woff2'), url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff') format('woff'),
			url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.ttf') format('truetype'), url('https://at.alicdn.com/t/font_2442084_o72ps3802ih.svg#zm') format('svg');
	}

	.zm {
		font-family: 'zm' !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.iconbackspace:before {
		content: '\ef11';
	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.cu-btn {
		position: relative;
		border: 0rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		height: 64rpx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0rpx, 0rpx);
		margin-right: initial;
	}

	.cu-btn::after {
		display: none;
	}

	.text-xl {
		font-size: 36rpx;
		font-weight: bold;
		font-family: 'microsoft-yahei';
	}

	.text-black {
		color: #333;
	}

	.active {
		background-color: #ddd !important;
		transform: translate(2rpx, 2rpx);
	}

	.key-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.key-content {
			position: absolute;
			bottom: 0;
			width: 100vw;
			background-color: #f7f7f7;
		}
	}

	.key-box {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 10rpx 0;

		.key-left {
			width: 75%;
		}

		.key-right {
			width: 25%;
			display: flex;
			flex-direction: column;
		}

		.key-bottom {
			width: 100%;
			display: flex;
		}
	}

	.del {
		width: 100%;
	}

	.btn-box {
		width: 33.33%;
		padding: 0 10rpx 10rpx 0;
		box-sizing: border-box;
	}

	.btn-zero {
		width: 66.66%;
		padding: 0 10rpx 10rpx 0;
		box-sizing: border-box;
	}

	.btn-point {
		width: 33.33%;
		padding: 0 10rpx 10rpx 0;
		box-sizing: border-box;
	}

	.key-right {
		flex-shrink: 0;
	}

	.key-btn {
		background-color: #fff;
		width: 100%;
		height: 90rpx;
	}

	.confirm {
		width: 100%;
		flex: 1;
		padding: 10rpx 0 10rpx 0;
		box-sizing: border-box;

		button {
			width: 100%;
			height: 100%;

			.confirm-text {
				color: #fff;
				display: block;
				font-size: 32rpx;
			}
		}
	}
</style>